// Copyright 2011 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

{namespace bite.client.Templates}

/**
 * @param rootFolder
 * @param serverUrl
 * @param consoleId
 * @param headerText
 * @param headerSubtext
 * @param tooltip
 */
{template .consoleContainer}
  <div {if $consoleId}id="{$consoleId}"{/if} class="bite-container"
       style="visibility:hidden">
    <link rel="stylesheet" href="{$rootFolder}/styles/consoles.css"
          type="text/css">
    <div class="bite-header">
      <div class="bite-logo">
        <a target="_blank" href="{$serverUrl}">
          <img src="{$rootFolder}/imgs/bite-logo-24.png" alt="BITE logo">
        </a>
      </div>
      <div class="bite-header-text">
        <span class="bite-header-text-main">
          {if $headerText}{$headerText}{/if}
        </span>
        <span class="bite-header-text-sub">
          {if $headerSubtext} - {$headerSubtext}{/if}
        </span>
      </div>
      {if $tooltip}
        <img title="{$tooltip}" src="{$rootFolder}/imgs/rpf/step-issue-16.png"
             width="16px" height="16px">
      {/if}
      <div class="bite-close-button">
        ✕
      </div>
    </div>
    <div class="bite-console-content">
      No content yet defined.
    </div>
    <div class="bite-console-infobar bite-hidden">
    </div>
  </div>
{/template}


/**
 * Bugs console.
 * @param rootFolder
 */
{template .bugConsole}
    <table class="bite-bugs-table">
      <tbody>
        <tr class="bite-content-row">
          <td class="bite-console-toolbar">
            <div>
              <div title="File a new bug"
                   class="bite-toolbar-button"
                   id="bite-toolbar-button-new-bug">
                <img class="bite-toolbar-button-image"
                     src="{$rootFolder}/imgs/bug-icon.png">
                <span class="bite-toolbar-button-label">New Bug</span>
              </div>
              <div title="Overlay data on the UI"
                   class="bite-toolbar-button"
                   id="bite-toolbar-button-overlay-bugs">
                <img class="bite-toolbar-button-image"
                     src="{$rootFolder}/imgs/overlay-icon.png">
                <span class="bite-toolbar-button-label">Overlay</span>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <div id="bite-bugs-content-canvas" class="bite-list-canvas">
      Fetching bug data ...
    </div>
{/template}


/**
 * @param results
 */
{template .addRows}
  {foreach $row in $results}
  <div class="bite-bugs-console-result-container bite-zippy">
    <div>
      <p>
        <span class="bite-expanded">+</span>
        <span class="bite-collapsed">-</span>
        {sp}{sp}Bugs related to{sp}:{sp}
        <span class="bite-console-target-url">
          <em>{$row['url']}</em>
        </span>
      </p>
    </div>
    <table class="bite-content-list"
        cellpadding="2" width="100%">
      <tbody>
         <tr>
           <th style="width: 10px">&nbsp;</th>
           <th style="width: 20px">ID</th>
           <th>Title</th>
         </tr>
        {foreach $curr in $row['bugs']}
          {if $curr['visible']}
            <tr class="bite-bugs-row">
              <td class="bite-bug-icon">
                <img src="{$curr['img']}" title="{$curr['state']}">
              </td>
              <td>
                <a href="{$curr['details_link']}" target="_blank">
                  {$curr['id']}
                </a>
              </td>
              <td class="bite-bug-title">
                {foreach $label in $curr['labels']}
                  <div class="bite-data-label"
                    {if $label['bgColor']}
                      style="background-color:{$label['bgColor']}"
                    {/if}>{$label['name']}</div>
                {/foreach}
                {$curr['title']}
              </td>
            </tr>
          {/if}
        {/foreach}
      </tbody>
    </table>
  </div>
  {/foreach}
{/template}


/**
 * @param rootFolder
 * @param serverUrl
 */
{template .testsConsole}
  <table class="bite-tests-table">
    <tbody>
      <tr class="bite-content-row">
        <td class="bite-console-toolbar">
          <div>
            <div id="bite-tests-toolbar-button-pass"
                 title="Mark this test as success"
                 class="bite-toolbar-button">
              <img class="bite-toolbar-button-image"
                   src="{$rootFolder}/imgs/test-pass.png">
              <span class="bite-toolbar-button-label">Pass</span>
            </div>
            <div id="bite-tests-toolbar-button-fail"
                 title="Mark this test as failure"
                 class="bite-toolbar-button">
              <img class="bite-toolbar-button-image"
                   src="{$rootFolder}/imgs/test-fail.png">
              <span class="bite-toolbar-button-label">Fail</span>
            </div>
            <div id="bite-tests-toolbar-button-skip"
                 title="Skip this test and get another one"
                 class="bite-toolbar-button">
              <img class="bite-toolbar-button-image"
                   src="{$rootFolder}/imgs/test-skip.png">
              <span class="bite-toolbar-button-label">Skip</span>
            </div>
            <div id="bite-tests-toolbar-button-new-bug"
                 title="File a new bug" class="bite-toolbar-button">
              <img class="bite-toolbar-button-image"
                   src="{$rootFolder}/imgs/bug-icon.png">
            </div>
            <div title="Manage your suites membership"
                 class="bite-toolbar-button">
              <a href="{$serverUrl}/compat/subscriptions" target="_blank">
              <span class="bite-toolbar-button-label">Membership</span>
              </a>
            </div>
          </div>
        </td>
      </tr>
      <tr class="bite-content-row">
        <td>
          <div id="bite-tests-content-canvas"
               class="bite-list-canvas bite-padded">
            <div>Start URL:
              <span class="bite-console-target-url"><em>...</em></span>
            </div>
            <hr>
            <div id="bite-tests-console-repro-steps"
              class="bite-tests-console-repro-steps">
              Fetching test data...
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  </div>
{/template}


/**
 * @param bugID
 * @param imgURI
 */
{template .bugMiniPopup}
  <DIV class="bug-popup-console bug-console-container bug-mini-popup">
    <IMG class="mini-bug-popup-icon" src={$imgURI} />
    <DIV class="mini-bug-popup-title">Bug {$bugID}</DIV>
  </DIV>
{/template}


/**
 * @param imgURI
 * @param title
 * @param message
 */
{template .submitCancelPopup}
  <DIV class="bug-popup-console bug-console-container{sp}
              bug-binding-submit-cancel"{sp}
       id="submit-cancel-popup">
    <IMG class="mini-bug-popup-icon" src={$imgURI} />
    <DIV class="mini-bug-popup-title">{$title}</DIV>
    <DIV class="mini-bug-popup-content">{$message}</DIV>
    <DIV class="mini-bug-popup-command-container">
      <SPAN id="confirmSubmit" class="pseudo-popup-link">Submit</SPAN>
      <SPAN id="confirmCancel" class="pseudo-popup-link">Cancel</SPAN>
    </DIV>
  </DIV>
{/template}


/**
 */
{template .boundControlOptions}
<DIV id="bug-popup-bound-menu" class="bug-popup-bound-dropdown-menu">
  <SPAN style="background-color: #fff">
    <DIV id="bug-popup-bound-menu-remove" class="bug-popup-bound-link">
      Remove Bug Binding
    </DIV>
    <HR class="bug-popup-menu-separator">
    <DIV id="bug-popup-bound-menu-cancel" class="bug-popup-bound-link">
      Cancel
    </DIV>
  </SPAN
</DIV>
{/template}


/**
 * @param imgURI
 * @param bugID
 * @param bugLink
 * @param status
 * @param priority
 * @param reportDate
 * @param reportBy
 * @param reportByURI
 * @param lastUpdateDate
 * @param lastUpdateBy
 * @param lastUpdateByURI
 * @param bugTitle
 * @param state
 * @param navLeft
 * @param navRight
 */
{template .bugDetailsPopup}
  <DIV class="bug-popup-console bug-console-container bug-details-popup"{sp}
       id="bug-popup-container">
    <IMG class="bug-popup-icon" src="{$imgURI}"/>
    <DIV class="bug-popup-id">
      Bug #
      <A class="bug-details-link" href={$bugLink} target="_blank">{$bugID}</A>
      {sp}<SPAN id="bug-popup-bound-label" class="bug-popup-bound-label">
        Bound
      </SPAN>
    </DIV>
    <DIV id='bug-popup-status' class='bug-popup-rhs-label bug-popup-status'>
      {$status}
    </DIV>
    <DIV id='bug-popup-priority'{sp}
         class='bug-popup-rhs-label bug-popup-priority'>
      Priority {$priority}
    </DIV>
    <DIV id='bug-popup-filed'
         class='bug-popup-date bug-popup-report-date'>
      Reported on {$reportDate} by{sp}
      <a class="bug-details-link" href={$reportByURI}>
        {$reportBy}
      </a>
    </DIV>
    <DIV id='bug-popup-updated'
         class='bug-popup-date bug-popup-update-date'>
      Updated on {$lastUpdateDate} by{sp}
      <a class="bug-details-link" href={$lastUpdateByURI}>
        {$lastUpdateBy}
      </a>
     </DIV>
    <DIV id='bug-popup-title' class='bug-popup-text'>
      {$bugTitle}
    </DIV>
    <DIV id='bug-popup-separator' class='bug-popup-separator'></DIV>
    <DIV class='bug-popup-iterator'>
      <TABLE id='bug-popup-iterator-table' style='display: none'><TR>
        <TD>
          <IMG id='bug-popup-nav-left' src='{$navLeft}' />
        </TD>
        <TD id='bug-popup-iteration'>0 of 0</TD>
        <TD>
          <IMG id='bug-popup-nav-right' src='{$navRight}' />
        </TD>
      </TR></TABLE>
    </DIV>
    <DIV id='bug-popup-commands' class='bug-popup-commands'>
      {if $state == 'active'}
        <SPAN id='bug-command-notABug' class='pseudo-link'>Not a Bug</SPAN>
        <SPAN id='bug-command-resolve' class='pseudo-link'>Resolve</SPAN>
      {elseif $state == 'resolved'}
        <SPAN id='bug-command-activate' class='pseudo-link'>Activate</SPAN>
        <SPAN id='bug-command-verify' class='pseudo-link'>Verify</SPAN>
      {elseif $state == 'closed'}
        <SPAN id='bug-command-activate' class='pseudo-link'>Activate</SPAN>
      {else}
        <!--Catch for the case unknown, and any unsupported state--!>
        <SPAN id='bug-command-activate' class='pseudo-link'>Activate</SPAN>
        <SPAN id='bug-command-resolve' class='pseudo-link'>Resolve</SPAN>
        <SPAN id='bug-command-notABug' class='pseudo-link'>Not a Bug</SPAN>
      {/if}
      <SPAN id='bug-command-comment' class='pseudo-link'>Comment</SPAN>
    </DIV>
  </DIV>
{/template}


/**
 * @param imgURI
 * @param bugID
 * @param bugLink
 * @param command
 */
{template .bugConfirmChanges}
  <DIV class="bug-popup-console bug-console-container bug-details-popup"{sp}
       id="bug-popup-container">
    <IMG class="bug-popup-icon" src="{$imgURI}"/>
    <DIV class="bug-popup-id">
      Bug #<A href={$bugLink}>{$bugID}</A>
    </DIV>
    {if $command != 'comment'}
      <DIV id='bug-popup-status-change'{sp}
           class='bug-popup-status-dropdown'>
        Confirm
        <select id="bug-update-status">
          {if $command == 'activate'}
            <OPTION>Available</OPTION>
            <OPTION>Assigned</OPTION>
            <OPTION>Untriaged</OPTION>
          {elseif $command == 'resolve'}
            <OPTION>Resolved</OPTION>
            <OPTION>Fixed</OPTION>
          {elseif $command == 'notABug'}
            <OPTION>Invalid</OPTION>
            <OPTION>WontFix</OPTION>
            <OPTION>Duplicate</OPTION>
          {elseif $command == 'verify'}
            <OPTION>Verified</OPTION>
          {/if}
        </select>
      </DIV>
    {/if}
    <DIV id='bug-popup-comment' class='bug-comment-field' contentEditable=true>
      Comments...
    </DIV>
    <DIV id='bug-confirm-options' class='bug-confirm-options'>
      <SPAN id='bug-command-cancel' class='pseudo-link'>Cancel</SPAN>
      <SPAN id='bug-command-submit' class='pseudo-link'>Submit</SPAN>
    </DIV>
  </DIV>
{/template}


/**
 * @param imgURI
 * @param bugID
 * @param bugLink
 * @param resultMessage
 */
{template .bugResultPopup}
  <DIV class="bug-popup-console bug-console-container bug-details-popup"{sp}
       id="bug-popup-container">
    <IMG class="bug-popup-icon" src="{$imgURI}"/>
    <DIV class="bug-popup-id">
      Bug #<A href={$bugLink}>{$bugID}</A>
    </DIV>
    <DIV id="bug-popup-status" class="bug-confirm-message">
      {$resultMessage |noAutoescape}
    </DIV>
    <DIV id="back-to-bug-details" class="pseudo-link back-to-bugs">
      Back to Bug Details
    </DIV>
  </DIV>
{/template}

